<template>
	<view>
		<view class="top-tab-view">
			<view class="left-tab">
				<u-tabs :list="tabs" :current="current" @change="change"></u-tabs>
			</view>
			<view class="arrow-btn" @click="openOrCloseCategoryView">
				{{categoryStatus ? '︿' : '﹀'}}
			</view>
		</view>
		<view class="category-view" v-if="categoryStatus">
			<view 
				@click="categorySelect(index)" 
				:class="current === index ? 'category-item-selected': ''" 
				class="category-item"
				v-for="(item,index) in tabs">
				{{item.name}}
			</view>
		</view>
		<view class="bottom-grid-list-view">
			<view class="grid-view">
				<uni-grid :column="2" :square="false" :showBorder="false" :highlight="false" @change="navToDetails">
					<uni-grid-item v-for="(item,index) in list" :index="index">
						<view class="grid-inner">
							<image :src="item.picShowUrl"></image>
							<view class="name">{{item.name}}</view>
							<view class="money">￥{{item.price}}/月</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
	import PageInfo from '../../utils/pageutils'
	import * as assistDev from '../../common/api/assistDev.js'
	import * as assistDevSort from '../../common/api/assistDevSort.js'
	export default {
		data() {
			return {
				tabs:[],
				current:0,
				categoryStatus:false,
				form:{
					firstSortCode:''
				},
				pageInfo:new PageInfo(),
				list:[],
				status:'more',
				initCurrentCode:''
			}
		},
		onLoad(opt) {
			if(opt.code){
				this.initCurrentCode = opt.code
			}
		},
		onShow() {
			this.getAllFirstSort()
		},
		onPullDownRefresh() {
			this.refresh()
		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			openOrCloseCategoryView(){
				this.categoryStatus = !this.categoryStatus
			},
			change(e){
				this.onTabChange(e.index)
			},
			categorySelect(e){
				this.onTabChange(e)
			},
			onTabChange(e){
				this.current = e
				this.form.firstSortCode = this.tabs[e].code
				this.refresh()
				this.categoryStatus = false
			},
			navToDetails(e){
				const index = e.detail.index
				const item = this.list[index]
				uni.navigateTo({
					url:"/accessoryRentalPages/pages/product-details/product-details?uid="+item.uid
				})
			},
			refresh(){
				this.pageInfo.reset()
				this.list = []
				this.status = 'loading'
				this.getList()
			},
			loadMore(){
				if(this.pageInfo.isNotLoadAll){
					this.status = 'loading'
					this.pageInfo.nextPage()
					this.getList()
				}else{
					this.status = 'noMore'
				}
			},
			getList(){
				const param = {
					pageIndex:this.pageInfo.pageIndex,
					pageSize:this.pageInfo.pageSize,
					firstSortCode:this.form.firstSortCode
				}
				assistDev.queryList(param).then(result => {
					const list = result.data.data.rows || []
					const total = result.data.data.total
					this.list = [...this.list,...list]
					this.pageInfo.total = total
					this.pageInfo.loadedTotal = this.list.length
					setTimeout(()=>{
						if(this.pageInfo.isNotLoadAll){
							this.status = 'more'
						}else{
							this.status = 'noMore'
						}
						uni.stopPullDownRefresh()
					},200)
				}).catch(error => {
					console.log(error);
				})
			},
			getAllFirstSort(){
				assistDevSort.queryAllFirstSort({}).then(result => {
					this.handletabs(result)
				}).catch(error => {
					console.log(error);
				})
			},
			handletabs(result){
				const list = result.data.data.rows || []
				list.unshift({
					name:'全部',
					code:undefined
				})
				this.tabs = list
				this.setCurrentTabItem()
				this.refresh()
			},
			setCurrentTabItem(){
				if(this.initCurrentCode){
					const find = this.tabs.findIndex(e => e.code === this.initCurrentCode)
					this.current = find
					this.form.firstSortCode = this.initCurrentCode
					this.initCurrentCode = ''
				}else{
					this.current = 0
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
.top-tab-view{
	height: 80rpx;
	display: flex;
	width: 100%;
	.left-tab{
		width: calc(100% - 100rpx);
	}
	.arrow-btn{
		width: 100rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.bottom-grid-list-view{
	.title-view{
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 10rpx;
		box-sizing: border-box;
		.title{
			flex: 1;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	.grid-view{
		.grid-inner{
			padding: 10rpx;
			box-sizing: border-box;
			image{
				width: 100%;
				height: 200rpx;
			}
			.name{
				font-size: 30rpx;
				margin-top: 10rpx;
			}
			.money{
				font-size: 40rpx;
				font-weight: bold;
				color: #2FCBCB;
			}
		}
	}
}


.category-view{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-top: 10rpx;
	.category-item{
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		border: solid 1rpx rgba(218, 218, 218, 0.6);
		border-radius: 30rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
	}
	.category-item-selected{
		border-color: #00BCB2;
	}
}

</style>
